<template>
    <div class="r_main">
        <div class="tabIn">
            <div class="tab">
                充值
            </div>
        </div>
        <div class="form_con">
            <div class="outer">
                <p>主题币充值</p>
                <el-form style="width: 60%;" ref="form" :model="form" label-width="7.81vw">
                    <el-form-item label="当前主题币:">
                        <strong>{{ userInfo.coin }}个</strong>
                    </el-form-item>
                    <!-- <el-form-item label="支付方式">
                        <el-radio v-model="pay" :label="1">微信支付</el-radio>
                        <el-radio v-model="pay" :label="2">余额支付</el-radio>
                    </el-form-item> -->
                    <el-form-item v-if="pay == 2" label="当前余额">
                        <strong>{{ userInfo.balance }}元</strong>
                    </el-form-item>
                    <el-form-item label="购买主题币:">
                        <div style="width: 30%;display: flex; align-items: center;">
                            <el-input type="number" v-model="form.nums" disabled></el-input>
                            <span style="margin-left: 10px;">个</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="总计">
                        <strong>{{ total }}元</strong>
                    </el-form-item>
                    <div class="select">
                        <el-form-item>
                            <div class="chose">
                                <el-button @click="getNums(item)" v-for="item in list" :key="item.id">{{ item.coin
                                }}</el-button>
                            </div>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <div class="chose2">
                            <el-checkbox v-model="isCheck">同意<router-link to="/article?id=7"
                                    style="color: #1068E7;">《主题币充值协议》</router-link></el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="btns">
                            <el-button type="danger" @click="onSubmit">支付</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog :visible.sync="showPay" width="400px" @close="clearTimer">
            <span slot="title" class="dialog-header">
                <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信扫码支付
            </span>
            <div style="display: flex;align-items: center;justify-content: center;">
                <img v-loading="Loading" style="max-width: 300px;max-height: 300px;" :src="pay_img" alt="">
            </div>
        </el-dialog>
    </div>

</template>
<script>
import { Loading } from 'element-ui'
import { baseUrl } from '@/apis/index'

export default {
    data() {
        return {
            form: {
                nums: '',
                bank: '',
                type: 1,
                author: '',
                cardId: '',
            },
            pay: 1,
            Loading: false,
            list: [],
            userInfo: {},
            choseId: 0,
            pay_img: '',
            showPay: false,
            isCheck: false,
            total: 0,
            timer: null
        }
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    mounted() {
        this.getUinfo()
        this.getList()

    },

    methods: {
        getList() {
            this.$api.getCoinList().then(res => {
                if (res.data.code == 1) {
                    this.list = res.data.data
                }
            })
        },
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        query_pay(id) {
            // 3秒定时执行
            this.timer = setInterval(() => {
                let params = {
                    id
                }

                this.$api.queryCoin(params).then(res => {
                    if (res.data.code == 1) {
                        this.showPay = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })

                        this.getUinfo()
                        this.form.nums = ''
                        this.clearTimer()
                    }
                })
            }, 3000)
        },
        getUinfo() {
            this.$api.getUserInfo().then(res => {
                if (res.data.code == 1) {
                    this.userInfo = res.data.data
                }
            })
        },
        getNums(item) {
            this.form.nums = item.coin
            this.choseId = item.id
            this.total = item.price
        },

        confirm(item) {
            console.log(item);

        },
        onSubmit() {
            if (!this.isCheck) {
                this.$message.closeAll()
                this.$message({
                    message: '请先勾选协议',
                    type: 'error'
                })
                return
            }
            // 判断余额
            if (parseFloat(this.userInfo.balance) < parseFloat(this.total) && this.pay == 2) {
                this.$message.closeAll()
                this.$message({
                    message: '余额不足',
                    type: 'error'
                })
                return
            }
            let params = {
                id: this.choseId,
                // op: this.pay
            }
            this.Loading = true
            this.$api.payCoin(params).then(res => {
                this.Loading = false
                if (res.data.code == 1) {
                    this.pay_img = baseUrl + 'home/base/qrcod?url=' + res.data.data.code_url;
                    this.showPay = true
                    this.query_pay(res.data.data.id)
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.r_main {
    width: 100%;


    .tabIn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 0;
        background-color: #E5E5E5;
        position: sticky;
        top: 99px;
        z-index: 99;
        padding: 0 23px;
        height: 60px;

        // border-top: 0.05rem solid #E8E8E8;
        .tab {
            font-weight: bold;
            font-size: 24px;
            color: #1068E7;
        }

        .btn2 {
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            width: 82px;
            text-align: center;
            line-height: 34px;
            height: 34px;
            background: #1068E7;
            border-radius: 17px;
        }

    }

    .form_con {
        min-height: 500px;
        // overflow-y: auto;
    }
}

.outer {
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    padding-bottom: 20px;
    padding: 0 80px 20px;
    flex-direction: column;

    >p {
        margin-top: 20px;
        font-size: 22px;
        font-weight: bold;
    }
}

.chose {
    button {
        display: inline-block;
        padding: 5px 20px;
        line-height: normal;
        border-radius: 20px;
        background-color: #e7e3e3;
        margin: 0 10px;
        cursor: pointer;
        font-size: 16px;

        &:hover {
            background-color: #F56C6C;
            color: #fff;
        }

        &:focus {
            background-color: #F56C6C;
            color: #fff;
        }
    }
}
@media screen and (max-width:768px) {
    .r_main .tabIn{
        height: 40px;
        padding: 0 20px;
        .tab{
            font-size: 15px;
        }
    }
    .outer{
        p{
            font-size: 15px;
        }
        .el-form{
            border: 1px solid #ccc;
            border-radius: 10px;
            width: 100% !important;
            padding: 10px;
            ::v-deep .el-form-item__label{
                width: auto !important;
             }
            button{
                font-size: 12px;
            }
        }
    }
    .el-form-item__content .btns .el-button {
        width: 100px;
        height: 30px;
        line-height: normal;
    }
    .chose2{
      ::v-deep .el-checkbox__inner{
width: 20px;
height: 20px;
&::after{
    width: 5px;
    height:9px;
    top: 3px;
    left: 5px;
}
        }
        ::v-deep .el-checkbox__label{
            font-size: 14px;
        }
    }
    }
</style>